<!--
*@Author: QWP
*@Description: 
*@Date: 2024-07-18 13:38:41
-->
<template>
  <a-layout class="f-h-100 u-emergency-index"
    :style="{'--bgC': state.levelColor.indexBgColor }">
    <a-layout-content class="f-h-100"
      style="overflow-y: auto; overflow-x: hidden">
      <a-row :gutter="12" class="f-h-100">
        <a-col :span="8">
          <ResponseEvent />
          
          <u-card title="周边应急物资" class="f-margin-t12">
            <u-table :columns="zbwzCols"
              :data="zbwzTabData"
              :scroll="{ y: 180 }">
            </u-table>
          </u-card>

          <u-card title="当前处置情况" class="f-margin-t12">
            <a-timeline style="height: 200px; padding-top: 8px">
              <a-timeline-item v-for="item in czqkData">
                <a-row>{{ item.a }}</a-row>
                <a-row>{{ item.b }}</a-row>
              </a-timeline-item>
            </a-timeline>
          </u-card>

        </a-col>
        <a-col :span="8">
          <a-space direction="vertical" size="middle">
            <LevelCard level="1"/>
            <WorkIndex :y="610"/>
          </a-space>
        </a-col>
        <a-col :span="8">
          <WeatherCard />

          <DirectReport2 class="f-margin-t12" />
        </a-col>
      </a-row>
    </a-layout-content>
  </a-layout>

  <!-- 消息浮动图标按钮 -->
  <a-float-button
    shape="circle"
    type="primary"
    style="right: 10px;"
    :badge="{ count: 100 }"
    @click="showChat = true"
  >
    <template #icon>
      <BellOutlined style="font-size: 20px; color: #fff"/>
    </template>
  </a-float-button>

  <!-- 展示群聊弹窗 -->
  <ChatDialog v-model:open="showChat"
    width="60%"
    @close="showChat = false"/>
</template>

<script lang='ts' setup>
import { ref, reactive, watch, computed, onMounted } from 'vue' 
import { useEmergencyStore } from '@/store'
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import SumWarning from './component/sumWarning/Index.vue'
import MojorDanger from './component/mojorDanger/Index.vue'
import LevelCard from './component/levelCard/Index.vue'
import WorkIndex from './component/work/Index.vue'
import DirectReport from './component/directReport/Index.vue'
import DirectReport2 from './component/directReport/Index2.vue'
import CommonFun from '@/views/index/index/components/commonFun/Index.vue'
import { getColor, levMainColor } from '@/views/index/emergencyIndex/data'
import ChatDialog from '@/views/oa/emergency/group/chat/ChatDialog.vue'
import ResponseEvent from './component/responseEvent/Index.vue'
import WeatherCard from './component/weatherCard/Index.vue'

const showChat = ref<boolean>(false)

const { level } = storeToRefs(useEmergencyStore())
const state = reactive({
  levelColor: getColor(1)
})

// 周边物资
let zbwzTabData = reactive<any[]>([]);
const zbwzCols = reactive<ColumnProps[]>([
  { title: '物资名称', dataIndex: 'a', minWidth: 100 },
  { title: '物资类型', dataIndex: 'b', minWidth: 100 },
  { title: '物资数量', dataIndex: 'c', minWidth: 100 },
])

// 处置情况
let czqkData = reactive<any[]>([])

onMounted(() => {
  for(let i = 1; i < 10; i++) {
    zbwzTabData.push({ a: `物资名称${i}`, b: `物资类型${i}`, c: `${Math.floor(Math.random() * 20)}` })

    czqkData.push({
      a: '2024-07-17 11:00', b: `当前处置情况${i}`
    })
  }
})

</script>

<style lang='scss'>
.u-emergency-index {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    width: 120%;
    height: 120%;
    background-color: var(--bgC);
  }
  .u-index-right-bottom-flat {
    .ant-float-btn-icon {
      padding: 10px auto!important;
      width: auto !important;
      .ant-badge-not-a-wrapper  {
        font-size: 12px;
      }
    }
  }
}
</style>